import React, {FunctionComponent} from "react";
import {connect, useDispatch} from "react-redux";
import {BlockOutlined, DatabaseOutlined} from "@ant-design/icons"
import {logoShrinkSVG, logoSVG} from "../components/SVG";
import {MenuContainerInterface} from "../interface/ApplicationInterface";
import {formatMapToTree} from "../utils/formate";
import {MenuInterface} from "../store/interface/MenuInterface";
import {SettingInterface} from "../store/interface/SettingInterface";
import {Layout, Menu} from 'antd';
import './index.less';
import {DeepClone} from "para-lib";
import {GetMenuProductActions} from "../store/actions/menuAction";
import {MENU} from "../store/types";

const {SubMenu} = Menu;

const MenuContainer: FunctionComponent<MenuContainerInterface> = (props) => {
    const {menu, routerPath} = props;
    const [state, setState] = React.useState<any>({collapsed: false});
    const [openKeys, setOpenKeys] = React.useState<any>([]);
    const [nMapping, setMapping] = React.useState<any>([]);
    const dispatch = useDispatch();
    // 菜单渲染数据
    const [menuList, setMenuList] = React.useState<any[]>([]);
    // 菜单是否展开
    React.useEffect(() => {
        if (menu && menu.length) {
            const menuList: any = menu && menu.filter((item: any) => item.type !== 'redirect');
            const {nMapList} = formatMapToTree(menuList, 'path');
            const {nMap: nMapping} = formatMapToTree(DeepClone(menu), 'path');
            let path = window.location.hash.split("#")[1];
            setMenuList(nMapList);
            setMapping(nMapping);
            if (~path.indexOf("?")) path = path.split("?")[0];
            if (path === '/') {
                setOpenKeys(["/home"]);
                dispatch({type: MENU.ROUTER_PATH, path: ["/home"]});
                window.location.hash = "#/home";
                return;
            }
            nMapping[path] && nMapping[path].parentPath && setOpenKeys(nMapping[path].parentPath.split(","))
        }
    }, [menu]);

    // 路由跳转
    const clickMenu = (item: any) => {
        dispatch({type: MENU.ROUTER_PATH, path: [item.path]});
        window.location.hash = item.path;
        setOpenKeys(item.parentPath.split(","))
    }

    const onOpenChange = (openKeys: any) => {
        setOpenKeys(openKeys);
    }

    const renderLogo = (expansion: boolean) => {
        return expansion ? logoSVG() : logoShrinkSVG()
    }
    const getFontClassJSX = (classes?: string) => {
        if (!classes) return;
        const iconMap:any = {
            "home": <BlockOutlined />,
            "db":   <DatabaseOutlined />
        }
        return iconMap[classes]
    }

    const MenuLoop = React.useCallback((menuData: any) => {
        if (!menuData || !menuData.length) return null;
        return menuData.map((item: any) => {
            if (item.children) {
                return <SubMenu icon={getFontClassJSX(item.icon)} key={item.path}
                                title={item.label || item.name}>{MenuLoop(item.children)}</SubMenu>
            }
            return <Menu.Item icon={getFontClassJSX(item.icon)} key={item.path}
                              onClick={() => clickMenu(item)}>{item.label || item.name}</Menu.Item>
        })
    }, [menuList]);

    React.useEffect(() => {
        const path = window.location.hash.split("#")[1];
        nMapping[path] && nMapping[path].parentPath && setOpenKeys(nMapping[path].parentPath.split(","))
        dispatch({type: MENU.ROUTER_PATH, path: [path]});
    }, [window.location.hash]);

    React.useEffect(() => {
        dispatch(GetMenuProductActions(dispatch));
    }, [])
    return (
        <div className={"xjh-menu"}>
            <Layout.Sider theme={"light"}>
                <div className="logo">{renderLogo(!state.collapsed)}</div>
                <Menu selectedKeys={routerPath} openKeys={openKeys} mode="inline" className={'xjh-menu-overflow'}
                      theme="light" onOpenChange={onOpenChange} multiple={false}>
                    {MenuLoop(menuList)}
                </Menu>
            </Layout.Sider>
        </div>
    );
};

export default connect(
    (
        state: { menu: MenuInterface, setting: SettingInterface, auth: any },
        _: MenuContainerInterface) => (
        {...state.menu, ...state.setting, ...state.auth}
    ),
)(MenuContainer);
